<template>
	<view class="content">
		<image class="logo" src="/static/images/common//yuyue.png" mode="aspectFit"></image>
		<view class="appointment-item">
			<text class="appointment-title">楼盘名称</text>
			<input class="appointment-input" placeholder="请输入楼盘名称"></input>
		</view>
		<view class="appointment-item">
			<text class="appointment-title">预约类型</text>
			<picker class="appointment-input-box" mode="selector" :range="appointment_types" range-key="type" :value="index" @change="onPickerChange">
				<text class="appointment-input-text">{{appointment_types[index].type}}</text>
				<image class="appointment-input-image" src="../../static/images/icon/right_icon.png"></image>
			</picker>
		</view>
		<view class="appointment-item">
			<text class="appointment-title">户&emsp;&emsp;型</text>
			<view class="appointment-input-box">
				<input class="appointment-input-text" placeholder="请输入户型" type="number"></input>
				<text class="appointment-size-unit">(m²)</text>
			</view>
		</view>
		<view class="appointment-item">
			<text class="appointment-title">姓&emsp;&emsp;名</text>
			<input class="appointment-input" placeholder="请输入姓名"></input>
		</view>
		<view class="appointment-item">
			<text class="appointment-title">联系方式</text>
			<input class="appointment-input" placeholder="请输入联系方式" type="number"></input>
		</view>
		<view class="appointment-item">
			<text class="appointment-title">微信电话</text>
			<input class="appointment-input" placeholder="请输入微信电话" type="number"></input>
		</view>
		<button class="submit">提交预约</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:1,
				title: 'Hello 周俊-202165110369',
				appointment_types:[
					{id:1,type:"验房"},
					{id:1,type:"微改报价"},
					{id:1,type:"设计"},
					{id:1,type:"拎包入住"}
				]
			};
		},
		onLoad() {},
		methods: {
			onPickerChange(e){
				this.index = e.target.value
			}
		}
	};
</script>
<style>
* {
	margin: 0 auto;
	padding: 0 0;
}
	
.content {
	width: 100vw;
	height: 100vh;
	background-color: #f5f5f5;
	box-sizing: border-box; //盒子模型
}

.logo {
	height: 450rpx;
	width: 100%;
}
.appointment-item{
	box-sizing: border-box;
	margin-top: 16rpx;
	padding: 0 24rpx;
	display: flex;
	align-items: center;
}
.appointment-title{
	width: 30%;
	text-align: center;
	font-size: 32rpx;
	color: #808080;
}
.appointment-input{
	box-sizing: border-box;
	height: 64rpx;
	line-height: 64rpx;
	padding-left: 12rpx;
	padding-right: 12rpx;
	width: 70%;
	background-color: white;
	border-radius: 8rpx;
	border: 3rpx solid rgba(0,0,0,0.2);
	margin-left: 12px;
	font-size: 35rpx;
	align-items: center;
}
.appointment-input-box{
	box-sizing: border-box;
	height: 64rpx;
	line-height: 64rpx;
	width: 70%;
	background-color: white;
	border-radius: 8rpx;
	border: 3rpx solid rgba(0,0,0,0.2);
	margin-left: 12px;
	font-size: 35rpx;
	position: relative;
	align-items: center;
}
.appointment-input-text{
	box-sizing: border-box;
	padding-left: 12rpx;
	padding-right: 72rpx;
	position: absolute;
	width: 100%;
	height: 100%;
}
.appointment-input-image{
	position: absolute;
	opacity: 0.2;
	right: 8rpx;
	width: 32rpx;
	height: 32rpx;
	top: 0;
	bottom: 0;
	margin:auto;
}
.appointment-size-unit{
	position: absolute;
	opacity: 0.2;
	right: 8rpx;
	top: 0;
	bottom: 0;
	margin:auto;
	font-weight: 700;
	font-size: 30rpx;
}
.submit{
	margin: 48rpx;
	font-size: 32rpx;
	color: #fff;
	background-color: #3D9C36;
}
</style>
